<template>
  <div id="app">
    <!-- <div class="top">
      <img src="./assets/img/login/Status bar-状态栏.png" alt="" />
    </div> -->
    <router-view class="main" />
    <van-tabbar
      :fixed="false"
      v-show="isNavShow"
      class="tabber"
      v-model="active"
      active-color="#63D197"
      style="border: none"
    >
      <van-tabbar-item
        replace
        :to="item.name"
        v-for="(item, index) in tabbers"
        :key="index"
        style="background-color: #1c1c1e"
      >
        <template #icon="props">
          <img
            :src="props.active ? item.active : item.inactive"
            :class="index == 0 ? 'img1' : 'img2'"
          />
        </template>
        {{ item.content }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      isNavShow: true,
      tabbers: [
        {
          name: "/home",
          content: "首页",
          active: require("@/assets/img/tabber/首页2.png"),
          inactive: require("@/assets/img/tabber/首页.png"),
        },
        {
          name: "/room",
          content: "房间",
          active: require("@/assets/img/tabber/房间2.png"),
          inactive: require("@/assets/img/tabber/房间.png"),
        },
        {
          name: "/news",
          content: "消息",
          active: require("@/assets/img/tabber/消息2.png"),
          inactive: require("@/assets/img/tabber/消息.png"),
        },
        {
          name: "/find",
          content: "发现",
          active: require("@/assets/img/tabber/发现2.png"),
          inactive: require("@/assets/img/tabber/发现.png"),
        },
        {
          name: "/user",
          content: "我的",
          active: require("@/assets/img/tabber/我的2.png"),
          inactive: require("@/assets/img/tabber/我的.png"),
        },
      ],
    };
  },
  created() {},
  watch: {
    $route(v) {
      this.active = this.tabbers.findIndex((i) => i.name == v.matched[0].path);
      this.isNavShow = v.meta.isNavShow;
    },
  },
};
</script>
<style lang="scss" scoped>
#app {
  background-image: url("./assets/img/login/Background-1.png");
  background-repeat: no-repeat;
  background-size: 200% 150%;
  background-position: center center;
}
.top {
  width: 100%;
  img {
    width: 651px;
    height: 26px;
    margin-top: 33px;
    margin-left: 67px;
  }
}
.tabber {
  background-color: #2f2f2f;
  height: 152px;
  .van-tabbar-item {
    font-size: 22px;
    line-height: 30px;
    .img1 {
      width: 60px;
      height: 26px;
      margin-bottom: 6px;
      margin-top: 8px;
    }
    .img2 {
      width: 44px;
      height: 42px;
    }
  }
}
.van-hairline--top-bottom::after {
  border: none;
}
.main {
  flex: 1;
  overflow: auto;
  width: 100%;
}
</style>
